<template>
  <view
    class="findList-item ss-flex-col"
    @click="emit('cardTap')"
  >
    <!-- 商家信息 -->
    <view
      class="shopInfo ss-flex"
      v-if="props.findData.shop"
    >
      <image :src="cdnUrl(props.findData.shop.logo)" />{{ props.findData.shop.shopName }}
    </view>
    <!-- <assIcon class="find-type" :type="props.findData.label"></assIcon> -->
    <image
      :src="
        cdnUrl(
          props.findData.image +
            (isVideo(props.findData.image) ? '?x-oss-process=video/snapshot,t_0,f_jpg' : ''),
        )
      "
      :class="[pinnedShow&&props.findData.pinned==1?'activeIc':'']"
      mode="aspectFill"
    />
    <view
      class="find-package ss-line-1"
      v-if="props.findData.package"
    >{{
      props.findData.package
    }}</view>
    <view class="find-title ss-flex ss-line-2">{{ props.findData.title }}</view>
    <view class="find-bottom ss-flex ss-row-between">
      <view
        class="find-user ss-flex"
        @click.stop="
          jump('/pages/user/userCenter/index?id=' + props.findData?.user.id)
        "
      >
        <image
          v-if="props.findData?.user?.avatar"
          :src="props.findData?.user?.avatar"
          mode="scaleToFill"
        />
        <image
          v-else
          src="https://huanglv.oss-cn-hangzhou.aliyuncs.com/static/userpic/1.png"
          mode="scaleToFill"
        />
        <!-- 
        <image
          :src="
            props.findData?.user?.avatar
              ? props.findData?.user?.avatar
              : `https://huanglv.oss-cn-hangzhou.aliyuncs.com/static/userpic/1.png`
          "
          mode="scaleToFill"
        /> -->

        <!-- <image :src="props.findData?.user?.avatar" mode="scaleToFill" /> -->

        <view class="ss-line-1">{{ props.findData?.user?.nickname }}</view>
      </view>
      <view
        class="find-like ss-flex"
        @click.stop="emit('like')"
      >
        <view
          class="find-like-icon"
          :class="props.findData.is_likes ? '_aicon-hear-full' : '_aicon-hear'"
          style="font-size: 38rpx"
          :style="{ color: theme.likes_color }"
        ></view>
        {{ formatCharCount(props.findData.likes) }}
      </view>
    </view>
  </view>
</template>

<script setup>
import assIcon from '@/components/ass-icon.vue';
import { cdnUrl, formatCharCount } from '@/association/utils';
import { computed, reactive } from 'vue';
import association from '@/association/store';
const emit = defineEmits(['cardTap', 'like']);

import sheep from '@/sheep';
const props = defineProps({
  findData: {
    type: Object,
  },
  pinnedShow: {
    type: Boolean,
    default: false
  },
});

const state = reactive({});
const theme = computed(() => association().theme);

const isVideo = (link) => {
  const mp4 = /.*\.mp4$/;
  const MP4 = /.*\.MP4$/;
  return mp4.test(link) || MP4.test(link);
};
const jump = (url) => {
  sheep.$router.go(url);
};
  // onPageScroll(() => { });
</script>

<style lang="scss" scoped>
@import '@/association/scss/index.scss';
.activeIc::after {
  position: absolute;
  top: 18rpx;
  left: 18rpx;
  content: '置顶';
  width: 90rpx;
  height: 40rpx;
  background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  color: #fff;
}
view {
  box-sizing: border-box;
}

.findList-item {
  width: 340rpx;
  margin: 25rpx 0 0;
  border-radius: 20rpx;
  background-color: #fff;
  position: relative;

  .find-type {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    z-index: 10;
    // background-color: #1BBDCE;
    // height: 50rpx;
    // width: 50rpx;
    // border-radius: 50%;
    // color: #fff;
    // font-size: 35rpx;
  }

  & > image {
    height: 404rpx;
    width: 340rpx;
    min-width: 176rpx;
    margin-right: 25rpx;
    border-radius: 25rpx 25rpx 0 0;
  }

  .find-package {
    position: absolute;
    left: 10rpx;
    top: 350rpx;
    font-size: 18rpx;
    background-color: #61625b;
    padding: 0 10rpx;
    color: #fff;
    line-height: 32rpx;
    height: 32rpx;
    border-radius: 5rpx;
    max-width: 320rpx;
  }

  .find-title {
    font-size: 13px;
    height: 34px;
    margin: 5px 10rpx;
    line-height: 17px;
  }

  .find-bottom {
    padding: 10rpx;
    height: 60rpx;
    color: #b0b0b0;
    font-size: 24rpx;
    border-radius: 0 0 25rpx 25rpx;
  }

  .find-user {
    height: 60rpx;
    color: #3d3d3d;
    font-size: 24rpx;

    & > image {
      margin-right: 10rpx;
      height: 48rpx;
      width: 48rpx;
      border-radius: 50%;
    }
  }

  .find-like {
    height: 60rpx;
    color: #b0b0b0;
    font-size: 24rpx;

    .find-like-icon {
      color: #1bbdce;
      margin-right: 10rpx;
    }
  }
}
</style>
